<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遥控器</title>
    <style>
        .remote {
            display: flex;
            flex-wrap: wrap;
            width: 216px;
            margin: 0 auto;
			background-color: gray;
			border: 1px solid black;
			border-radius: 15px;
        }
        .button {
            width: 50px;
            height: 50px;
            margin: 10px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
		.space{
            width: 50px;
            height: 50px;
            margin: 10px;
			color: white;
            display: flex;
            justify-content: center;
            align-items: center;
		}
        .button:hover {
            background-color: #e0e0e0;
        }
		
        #dialog {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            border: 1px solid black;
            padding: 20px;
            z-index: 1000;
        }
        #overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
		.toast {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(1);
			transition: transform 0.3s, opacity 0.3s;
			z-index: 1000;
			pointer-events: none;
			background-color: #333;
			color: white;
			padding: 10px;
			border-radius: 5px;
			opacity: 0;
		}

		/* 显示toast */
		.toast.show {
			opacity: 1;
			pointer-events: auto;
		}
    </style>
</head>
<body>
    <div class="remote">
	
		<div class="space"> </div>
        <div id="power" class="button">电源</div>
		<div class="space"> </div>
		
        <div id="source" class="button">信源</div>
		<div class="space"> </div>
        <div id="menu" class="button">菜单</div>
		
		<div class="space"> </div>
        <div id="up" class="button">↑</div>
		<div class="space"> </div>
		
        <div id="left" class="button">←</div>
        <div id="ok" class="button">OK</div>
        <div id="right" class="button">→</div>

		<div class="space"> </div>
        <div id="down" class="button">↓</div>
		<div class="space"> </div>
		
        <div id="game" class="button">游戏</div>
		<div class="space"></div>
        <div id="back" class="button">返回</div>
		
        <div id="dark" class="button">－</div>
		<div class="space">☼</div>
        <div id="light" class="button">＋</div>
		
        <div id="addvol" class="button">－</div>
		<div class="space">♬</div>
        <div id="decvol" class="button">＋</div>
		
		<div class="space"></div>
		<div class="space">遥控器</div>
		<div class="space"></div>
    </div>
    <div id="overlay"></div>
    <div id="dialog">
        <p>开始遥控器学习，请在10秒内完成</p>
        <!--<button onclick="hideDialog()">退出学习模式</button>-->
    </div>
	<div id="toast" class="toast">Your message has been sent!</div>
    <script>
		
        function showDialog() {
            document.getElementById('dialog').style.display = 'block';
            document.getElementById('overlay').style.display = 'block';
            document.getElementById('overlay').style.pointerEvents = 'none'; // 禁止响应鼠标事件
            document.addEventListener('keydown', preventKeyboard); // 禁止响应键盘事件
        }

        function hideDialog() {
            document.getElementById('dialog').style.display = 'none';
            document.getElementById('overlay').style.display = 'none';
            document.getElementById('overlay').style.pointerEvents = ''; // 恢复响应鼠标事件
            document.removeEventListener('keydown', preventKeyboard); // 恢复响应键盘事件
        }

        function preventKeyboard(event) {
			//alert(event)
            event.preventDefault(); // 阻止默认行为，例如按下Esc键关闭对话框
        }
		
        function learnKey(key_id) {
			//学习按键
			showDialog();
            var xhr = new XMLHttpRequest();
            var url = "/learn";
            var data = JSON.stringify({
                key: key_id
            });
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4){
					if (xhr.status === 200) {
						var data = JSON.parse(xhr.responseText);
						if(data.code==0){
							var button = document.getElementById(key_id);
							button.style.color = 'blue'
							showToast("学习成功！");
						}else{
							showToast(data.msg);
						}
					}
					hideDialog();
				}
				
            };
            xhr.send(data);
        }

        function sendKey(key_id) {
			//发送按键
            var xhr = new XMLHttpRequest();
            var url = "/send";
            var data = JSON.stringify({
                key: key_id
            });
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
					if(data.code==0){
						showToast("发送成功！");
					}else{
						showToast(data.msg);
					}
                }
            };
            xhr.send(data);
        }
		function updateButtonState(){
			//更新按键状态
            var xhr = new XMLHttpRequest();
            var url = "/getkeys";
            var data = JSON.stringify({
            });
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
					if(data.code==0){
						var keys = data.keys
						const buttons = document.querySelectorAll('.button');
						buttons.forEach(button => {
							if(keys.includes(button.id)){
								button.style.color = 'blue'
							}else{
								button.style.color = 'gray'
							}
						});
					}
                }
				hideDialog();
            };
            xhr.send(data);
		}
		
		function showToast(msg) {
			var toast = document.getElementById('toast');
			toast.textContent = msg
			toast.classList.add('show');
			// 3秒后关闭toast
			setTimeout(function() {
				toast.classList.remove('show');
			}, 3000);
		}
		
        const buttons = document.querySelectorAll('.button');
        buttons.forEach(button => {
            button.addEventListener('click', (event) => {
				if (event.ctrlKey){
					learnKey(button.id)
				}else{
					sendKey(button.id)
				}
            });
        });
		updateButtonState();
    </script>
</body>
</html>
